<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">

  <script type="text/javascript" src="./vue.js"></script>

  <style>
    .red {
      background-color: red;
    }

    .yellow {
      background-color: yellow;
    }

    .a {
      font-style: italic;
    }

    .b {
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div id="box">

    <button @click="handleClick()">click</button>

    <div :class="isActive?'red':'yellow'">我是动态绑定class-三目写法</div>
    <div :class="classobj">我是动态绑定class-对象写法</div>
    <div :class="classarr">我是动态绑定class-数组写法</div>

    <div :style="'background:'+(isActive?'red':'yellow')">我是动态绑定style-三目写法</div>
    <div :style="styleobj">我是动态绑定style-对象写法</div>
    <div :style="stylearr">我是动态绑定style-数组写法</div>
  </div>

  <script type="text/javascript">

    var vm = new Vue({
      el: "#box",
      data: {
        isActive: true,

        // class = "a b"
        classobj: {
          a: true,
          b: true
          // a b, class名字
        },

        // class = "a b"
        classarr: ["a", "b", "red"],

        styleobj: {
          backgroundColor: "red",
          color:"white"
        },
        stylearr: [
          { fontStyle: "italic" },
          { fontWeight: "bold" }
        ]
      },

      methods: {
        handleClick() {
          this.isActive = !this.isActive
        }
      }

    })

  </script>
</body>

</html>